<template>
  <div>
  <Header></Header>
  <Nav></Nav>
  <span class="headertitle">课题上报</span>
  <el-card class="box-card">

      <el-form label-width="100px">
        <el-row>
          <el-col :span="4">
              <el-form-item class="ktW" label="课题名称">
                    <el-input v-model="Munb1" placeholder="请输入"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item class="ktW" label="课题负责人">
                  <el-input v-model="Munb2" placeholder="请输入" style="width: 180px;"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item class="ktW" label="学科分类">
                <el-select  v-model="region" placeholder="请选择">
                  <el-option label="选项一" value="shanghai"></el-option>
                  <el-option label="选项二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item  class="ktW" label="所属二级机构">
                <el-select  v-model="region2" placeholder="请选择" style="width: 180px;">
                  <el-option label="选项一" value="shanghai"></el-option>
                  <el-option label="选项二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
          <el-form-item  class="ktW" label="年份">
            <el-select  v-model="region3" placeholder="请选择">
              <el-option label="选项一" value="0"></el-option>
              <el-option label="选项二" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item  class="ktW" label="课题类型">
            <el-select  v-model="region4" placeholder="请选择">
              <el-option label="选项一" value="0"></el-option>
              <el-option label="选项二" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </el-row>
      </el-form>
      <el-form>
        <el-row>
          <el-col :span="4" style="margin-left: 30px;">
              <el-form-item  label="研究领域" >
                <el-select  v-model="region5" placeholder="请选择" style="width:185px">
                  <el-option label="选项一" value="shanghai"></el-option>
                  <el-option label="选项二" value="beijing"></el-option>
                </el-select>
                </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 30px;">
              <el-form-item  label="学段">
                <el-select  v-model="region6" placeholder="请选择" style="width:180px">
                  <el-option label="选项一" value="shanghai"></el-option>
                  <el-option label="选项二" value="beijing"></el-option>
                </el-select>
                </el-form-item>
          </el-col>
          <el-col :span="4" >
            <el-form-item >
              <el-button type="primary">筛选</el-button>
                <el-button>清空</el-button>
              </el-form-item>
            </el-col>
        </el-row>
            <el-form-item class="btnss" style="width: 100%;">
                <el-button type="primary">课题申报统计</el-button>
                <el-button class="el-icon-pie-chart" style="float: right;" @click="statistics()"> 统 计</el-button>
            </el-form-item>
      </el-form>
              <!-- 11 -->
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                  >
           <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column label="序号" type="index" width="70"></el-table-column>
           <el-table-column prop="num1" label="课题名称" width="250"></el-table-column>
           <el-table-column prop="num2" label="课题类型" ></el-table-column>
           <el-table-column prop="num3" label="研究领域"></el-table-column>
           <el-table-column prop="num4" label="学科分类"></el-table-column>
           <el-table-column prop="num5" label="所属二级机构"></el-table-column>

           <el-table-column prop="num6" label="状态"></el-table-column>
           <el-table-column prop="num7" label="负责人"></el-table-column>
           <el-table-column prop="num8" label="申报时间" width="200"></el-table-column>
           <el-table-column prop="num9" label="立项时间" width="200"></el-table-column>
           <el-table-column label="操作">
              <el-link type="primary" @click="dialogVisible = true">查看课题材料</el-link>
           </el-table-column>
           </el-table>
           
  </el-card>
  <el-dialog
  title="课题申报材料"
  :visible.sync="dialogVisible"
  width="54%">
  <el-descriptions direction="vertical" :column="1" border>
  <el-descriptions-item label="课题申报材料">
    申报材料 <el-button size="mini">查看</el-button>
    <el-button size="mini" type="primary" class="download">下载</el-button>

    申报材料 <el-button size="mini">查看</el-button>
    <el-button size="mini" type="primary" class="download">下载</el-button>

    申报材料 <el-button size="mini">查看</el-button>
    <el-button size="mini" type="primary" class="download">下载</el-button>
  </el-descriptions-item>

  <el-descriptions-item label="课题开题">
    开题报告 <el-button size="mini">查看</el-button>
    <el-button size="mini" type="primary" class="download">下载</el-button>
  </el-descriptions-item>

  <el-descriptions-item label="研究阶段1">
    活动材料 <el-button size="mini">查看</el-button>
    <el-button size="mini" type="primary" class="download">下载</el-button>
  </el-descriptions-item>

  <el-descriptions-item label="课题中期">
    中期报告 <el-button size="mini">查看</el-button>
    <el-button size="mini" type="primary" class="download">下载</el-button>
  </el-descriptions-item>

  <el-descriptions-item label="研究阶段2">
    活动材料 <el-button size="mini">查看</el-button>
    <el-button size="mini" type="primary" class="download">下载</el-button>
  </el-descriptions-item>

  <el-descriptions-item label="课题结题">
    结题报告 <el-button size="mini">查看</el-button>
    <el-button size="mini" type="primary" class="download">下载</el-button>
  </el-descriptions-item>
</el-descriptions>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">返 回</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Nav from '@/components/Nav.vue'
export default {
  data(){
      return {
        dialogVisible:false,
              Munb1:'',
              Munb2:'',
              Munb3:'',
          region:'',
          region2:'',
          region3:'',
          region4:'',
          region5:'',
          region6:'',
        form: {
          name:'',
          name2:'',
          name3:'',
        },
          tableData:[{
              num1:'《古猿人进化史》',
              num2:'历史',
              num3:'历史文学',
              num4:'古猿',
              num5:'教育局',
              num6:'待审核',
              num7:'张三',
              num8:'2022-12-19 09:48:12',
              num9:'2022-12-20 12:00:00',
          },{
            num1:'《古猿人进化史》',
              num2:'历史',
              num3:'历史文学',
              num4:'古猿',
              num5:'教育局',
              num6:'待审核',
              num7:'张三',
              num8:'2022-12-19 09:48:12',
              num9:'2022-12-20 12:00:00',
          }],
      }
  },
  components:{
  Header,
  Nav
},
methods:{
  statistics(){
    this.$router.push('/statistics')
  }
}
}
</script>

<style lang="less" scoped>
  .box-card{
      width: 91%;
      height: 800px;
      float: right;
      margin-right: 1%;
      margin-top: -43%;
  }
  .top{
  width: 100%;
}
// .ktW{
//   width: 200px;
//   float: left;
//   margin-left: 20px;
// }
.btnss{
margin-right:400px;
}
body{
position: relative;
}
.headertitle{
position: absolute;
top: 0;
z-index: 999;
margin-top: 20px;
margin-left: 180px;
font-size: 16px;
}
.download{
  margin-right: 50px;
}
</style>